<template>
    <div class="find">
        <div class="find-top">
            <el-row class="f-t-row">
                <el-col :xs="6" :sm="6"></el-col>
                <el-col :xs="12" :sm="12">
                    <div class="f-t-center">
                        <div class="ft-c-left" :class="{'menu-active': menuType == 'type'}" @click="changeMenu('type')">
                            分类
                        </div>
                        <div class="ft-c-right" :class="{'menu-active': menuType == 'author'}" @click="changeMenu('author')">
                            作者
                        </div>
                    </div>
                </el-col>
                <el-col :xs="6" :sm="6">
                    <div class="f-t-right">
                        <div class="pd-r-icon" style="text-align: right;" @click.prevent="goToSearch"><svg t="1680429221695" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="6167" width="20" height="20"><path d="M448 768c176.725333 0 320-143.274667 320-320 0-176.725333-143.274667-320-320-320-176.725333 0-320 143.274667-320 320 0 176.725333 143.274667 320 320 320z m0 42.666667c-200.298667 0-362.666667-162.368-362.666667-362.666667S247.701333 85.333333 448 85.333333s362.666667 162.368 362.666667 362.666667-162.368 362.666667-362.666667 362.666667z m304.917333-27.584a21.333333 21.333333 0 0 1 30.165334-30.165334l150.848 150.848a21.333333 21.333333 0 0 1-30.165334 30.165334l-150.848-150.826667z" fill="#3D3D3D" p-id="6168"></path></svg></div>
                    </div>
                </el-col>
            </el-row>
        </div>
        <div class="find-content">
            <type class="type" :class="{'menu-change-active-left': menuType == 'author', 'menu-change-active-right': menuType == 'type'}"></type>
            <author class="author" :class="{'menu-change-active-left': menuType == 'author', 'menu-change-active-right': menuType == 'type'}"></author>
        </div>
    </div>
</template>

<script setup lang="ts">
import { computed, ref } from "vue"
import Type from './component/type-list.vue'
import Author from './component/author-list.vue'
import userStore from '../user.store';
import { useRoute, useRouter } from 'vue-router';

const route = useRoute()
const router = useRouter()
const menuType = ref<string>('type')
const changeMenu = (val: string) => {
    menuType.value = val
}

const menuData = computed(() => {
    return {
        leftMsg: '返回',
        centerMsg: '发现'
    }
})

const userSe = userStore()
let isLogin = computed(() => {
    return userSe.getIsLogin
})
const goToSearch = () => {
    // if(!isLogin.value) {
    //     router.push({ name: 'userIdLogin' })
    //     return 
    // }
    router.push({ name: 'search' })
}
</script>

<style lang="less" scoped>
.find {
    width: 100vw;
    background-color: var(--bg-color);
    .find-top {
        width: 100%;
        height: var(--navigation-bar-height);
        border-bottom: 1px solid var(--border-color);
        box-sizing: border-box;
        padding: 0.1rem 1rem;
        .f-t-row {
            height: 100%;
            justify-content: center;
            align-items: center;
            .pd-r-icon {
                path {
                    fill: var(--icon-color-gray);
                }
            }
        }
        .f-t-center {
            margin: 0 auto;
            width: max-content;
            height: 100%;
            box-sizing: border-box;
            text-align: center;
            border: 1px solid var(--border-color-blue);
            border-radius: 5px;
            .ft-c-left, .ft-c-right {
                display: inline-block;
                padding: 0 0.5rem;
                width: 2rem;
                height: 100%;
                color: var(--font-color-blue);
            }
            .ft-c-right {
                border-left: 1px solid var(--border-color-blue);
            }
        }
    }
    .menu-active {
        background-color: var(--bg-color-blue);
        color: var(--font-color-white) !important;
    }
    .find-content {
        position: relative;
        overflow-x: hidden;
        height: calc(100vh - 6rem);
        .type, .author {
            position: absolute;
            transition: all 0.3s;
        }
        .type {
            left: 0;
            top: 0;
        }
        .menu-change-active-left {
            transform: translateX(-100vw);
        }
        .menu-change-active-right {
            transform: translateX(0);
        }
        .author {
            left: 100vw;
        }
        .author-active {
            transform: translateX(-100vw);
        }
    }
}
</style>